<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="开始时间" prop="start_time">
				<el-date-picker v-model="queryParams.start_time" type="date" clearable value-format="X" placeholder="请选择开始时间" />
			</el-form-item>
			<el-form-item label="下单结束时间" prop="end_time">
				<el-date-picker v-model="queryParams.end_time" type="date" clearable value-format="X" placeholder="请选择结束时间" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-view" @click="onViewOrder(1)" :disabled="single">查看导入成功详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-view" @click="onViewOrder(0)" :disabled="single">查看导入中详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-view" @click="onViewOrder(2)" :disabled="single">查看导入失败详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-download" @click="onExport" :disabled="single">导出全部发货记录</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="记录ID" align="center" prop="id" />
			<el-table-column label="文件名称" align="center" prop="name" />
			<el-table-column label="导入来源" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="导入人" align="center" prop="username" />
			<el-table-column label="总订单量" align="center" prop="num" />
			<el-table-column label="导入中" align="center">
				<template #default="scope">{{ (scope.row.num * 1000 - scope.row.num_success * 1000 - scope.row.num_fail * 1000) / 1000 }}</template>
			</el-table-column>
			<el-table-column label="成功订单量" align="center" prop="num_success" />
			<el-table-column label="失败订单量" align="center" prop="num_fail" />
			<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
			<el-table-column label="创建时间" align="center" prop="time" :formatter="formatTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<view-orrder-courier-dialog ref="viewOrrderCourierRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';

import { orderImportJournal, orderExportSendFail } from '/@/api/admin1';
import { endTimePlus, timeDictionary } from '/@/utils/dictionaryTranslation';
import { ElLoading } from 'element-plus';

import ViewOrrderCourierDialog from './dialog/ViewOrrderCourierDialog.vue';
import { handleDownloadByName } from '/@/utils/utils';

export default {
	name: 'deliveryFecord',
	components: { ViewOrrderCourierDialog },
	setup() {
		let start_page: number = 1; // 导出全部订单默认页数
		let start_page_total: number = 1; // 导出全部订单总页数
		let selectionInfo: Array<any> = []; // 被选择的数据项
		const queryFormRef = ref(null);
		const viewOrrderCourierRef = ref(null);
		const loadingDownloadRef = ref(null);
		const state = reactive({
			queryParams: {
				start_time: '',
				end_time: '',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			showSearch: true,
			tableList: [],
			loading: false,
			total: 20,
		});

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 导出全部发货记录
		const onExport = () => {
			(loadingDownloadRef.value as any) = ElLoading.service({
				lock: true,
				text: '正在导出，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			_orderExportSendFail({ start_page: 1, file_log_id: selectionInfo[0].id, status: 0 });
		};
		// 查看导入详情
		const onViewOrder = (status: number) => {
			(viewOrrderCourierRef.value as any)?.openDialog(
				{
					...selectionInfo[0],
					status,
				},
				() => getList()
			);
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			selectionInfo = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_orderImportJournal({
				...state.queryParams,
				end_time: endTimePlus(state.queryParams.start_time, state.queryParams.end_time),
			});
		};
		// 来源数据字典
		const formatterType = (row: any) => {
			switch (row.type) {
				case 0:
					return '平台';
				case 1:
					return '供应商';
				default:
					return '未知错误';
			}
		};
		// 状态数据字典
		const formatterStatus = (row: any) => {
			switch (row.status) {
				case 0:
					return '待读取';
				case 1:
					return '已读取';
				default:
					return '未知错误';
			}
		};
		// 录入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.time);
		};

		/********** 网络请求 **********/
		// 发货记录
		const _orderImportJournal = (_data: object) => {
			orderImportJournal(_data)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};
		// 导出发货记录
		const _orderExportSendFail = (_data: any) => {
			if (start_page <= start_page_total) {
				orderExportSendFail(_data)
					.then((res: any) => {
						start_page == 1 && (start_page_total = res.data.info.count_page);
						start_page++;
						handleDownloadByName(res.data.info.url, '发货记录导出', false);
						_orderExportSendFail({ start_page: 1, file_log_id: selectionInfo[0].id, status: 0 });
						if (start_page >= start_page_total) {
							(loadingDownloadRef.value as any)?.close();
							start_page = 1;
							start_page_total = 1;
						}
					})
					.catch(() => {
						(loadingDownloadRef.value as any)?.close();
						start_page = 1;
						start_page_total = 1;
					});
			}
		};

		return {
			queryFormRef,
			viewOrrderCourierRef,
			onQuery,
			onResetQuery,
			onSelectionChange,
			onViewOrder,
			getList,
			formatterType,
			formatterStatus,
			formatTime,
			onExport,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
